<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/5/10
  Time: 3:26 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>文件上传</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="${path}/plugins/layui/css/layui.css">
</head>
<body>
    <%--    文件上传 - post请求--%>
    <form action="/boot/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file">
        <input type="submit" value="文件上传">
    </form>

    <hr>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>拖拽上传</legend>
    </fieldset>

    <div class="layui-upload-drag" id="test10">
        <i class="layui-icon"></i>
        <p>点击上传，或将文件拖拽到此处</p>
        <div class="layui-progress" lay-filter="demo">
            <div class="layui-progress-bar" lay-percent="0%"></div>
        </div>
        <div class="layui-hide" id="uploadDemoView">
            <hr>
            <img src="" alt="上传成功后渲染" style="max-width: 196px">
        </div>
    </div>

    <script src="${path}/plugins/layui/layui.js"></script>
    <script>
        layui.use(['upload', 'element', 'layer'], function() {
            var $ = layui.jquery
                , upload = layui.upload
                , element = layui.element
                , layer = layui.layer;
            //拖拽上传
            upload.render({
                elem: '#test10'
                ,url: 'http://localhost:8089/boot/upload/uploads' //改成您自己的上传接口
                ,progress: function(n, elem, res, index){
                    var percent = n + '%' //获取进度百分比
                    element.progress('demo', percent); //可配合 layui 进度条元素使用

                    //console.log(elem); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。
                    //console.log(res); //得到 progress 响应信息
                    //console.log(index); //得到当前上传文件的索引，多文件上传时的进度条控制，如：
                    element.progress('demo-'+ index, n + '%'); //进度条
                }
                ,done: function(res){
                    layer.msg('上传成功');
                    layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', "http://localhost/boot/imgs/"+res.data);
                    console.log(res)
                }
            });

        });
    </script>
</body>
</html>
